<template>
  <cell-wrapper
    v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
    :key="wrapperType"
    :wrapper-type="wrapperType"
    :style="{ backgroundColor: contentStyle.backgroundColor }"
  >
    <template v-if="columnsConfig.contentConfig.boolConfig === 'collection'">
      <star-filled v-if="value" style="color: gold" @click="handleSwitchValue" />
      <star-outlined v-else @click="handleSwitchValue" />
    </template>
    <a-switch
      v-else-if="columnsConfig.contentConfig.boolConfig === 'switch'"
      :checked="value"
      @change="handleSwitchValue"
    />
  </cell-wrapper>
</template>

<script>
  import { computed, defineComponent } from 'vue';
  import CellWrapper from '@/components/page/tableCell/cellWrapper.vue';
  import { generateContentStyle } from '@/utils/index';

  export default defineComponent({
    name: 'BoolTableCell',
    components: {
      CellWrapper,
    },
    inheritAttrs: false,
    props: {
      // 当前单元格的值
      value: {
        type: Boolean,
        default: false,
      },
      // 单元格的默认样式
      defaultStyle: {
        type: Object,
        default: () => ({}),
      },
      // 单元格的条件样式配置
      conditionStyle: {
        type: Array,
        default: () => {
          return [];
        },
      },
      // 当前行的数据
      rowData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
      conditionValueMap: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 当前列的配置
      columnsConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 当前单元格是否处于编辑状态
      isEdit: {
        type: Boolean,
        default: () => {
          return false;
        },
      },
    },
    emits: ['change', 'switchToFalse', 'switchToTrue'],
    setup(props, { emit }) {
      // 内容显示的样式
      const contentStyle = computed(() => {
        return generateContentStyle(
          props.columnsConfig.contentConfig,
          props.rowData,
          props.conditionValueMap,
        );
      });

      const handleValueChange = (event) => {
        emit('change', event.target.value);
      };
      const handleSwitchValue = () => {
        if (props.value) {
          emit('switchToFalse');
        } else {
          emit('switchToTrue');
        }
      };
      return {
        contentStyle,
        handleSwitchValue,
        handleValueChange,
      };
    },
  });
</script>
